<template>
	<view>
		
	</view>
</template>

<script>
	import tuiNavigationBar from "@/components/thorui/tui-navigation-bar/tui-navigation-bar.vue"
	import LsSwiper from '@/components/ls-swiper/index.vue';
	import login from '@/components/login/login.vue'; 
	export default {
		components: {
			tuiNavigationBar,
			login,
			LsSwiper
		},
		data() {
			return {
				roomId: '',
				top: 0, //标题图标距离顶部距离
				opacity: 0,
				height: 0,
				tipMsg: '',
				isConfirm: false,
				mutualInfo: {},
				showLikePop: false,
				animUrl: '',
				showAnima: false,
				showBtn: true,
				showArrowDown: true,
				isInit: true,
				showTabbar: true,
				scrollTop: 0,
				oldScrollTop: 0,
				unfold: false,
				isLoginPop: false,
				sheetList: [],
				sheetShow: false,
				userData: {
					"id": 88,
					"nickName": "熙~",
					"age": 20,
					"wechatFlag": false,
					distance: '0',
					"height": 170,
					"constellation": "巨蟹座",
					"profession": "保密",
					"gender": "FEMALE",
					"school": "社会大学 ",
					"education": "Master",
					"educationalType": "FullTime",
					"aboutMe": "每天睡不醒，不吃香菜，今天的kpi达到了吗，好像又胖了",
					"interest": "喜欢吃饭和睡懒觉，今天又起来完了，不行，快要迟到了，加油快跑",
					"loveRequirement": "阳光 帅气 有钱 爱我 阳光 帅气 有钱 爱我阳光 帅气 有钱 爱我阳光 帅气 有钱 爱我阳光 帅气 有钱 爱我",
					"city": '邯郸市',
					"marriage": "Unmarried",
					"emotional": "Single",
					"annualSalary": "Less_Ten",
					"imgList": [
						"http://rbtnet.oss-cn-hangzhou.aliyuncs.com/test/20240522/8b22e7d1f7494cd9819613294031a117.jpg",
					],
					"characterType": null,
					"surplusNum": 3,
					"birthday": "2002-07-05 00:00:00",
					"userAuthStatus": "DOUBLE",
					"additional": {
						"identityAuth": "PASS",
						"educationAuth": "PASS",
						"waitApprovedStatus": null
					},
					"userArticleViewResponse": {
						"articleImg": [],
						"articleContent": null
					}
				},
				img: this.$BASE_URL,
				// bgColor: 'linear-gradient(to bottom, #e8eef6, #eef5f6)',
				bgColor: '#F4F5F9',
				base_lsit: [

				],
				data: [],
				count: 0,
				ownerId: null,
				timeoutObj: null,
				reConnect: true,
				socketTask: null,
				dataList: [],
				adFlag: false,
				cardValue: '0',
				query: {
					max: 35,
					min: 18,
					sex: '',
					isCity: '0',
				},
			};
		},
		created() {
			
		},
		computed: {
		
		},
		methods: {
			initNavigation(e) {
				this.height = e.height;
				this.opacity = e.opacity;
				this.top = e.top;
			},
			opacityChange(e) {
				this.opacity = e.opacity;
			},
			getCardValue() {
				this.$u.get('/system/config/getCardValue',{
					appId: this.website.appId,
					scene: uni.getStorageSync("scene"),
					userId: uni.getStorageSync("userId"),
				}).then(res => {
					this.cardValue = res.data;
				});
			},
			shaixuan() {
				this.getLocation();
				this.judgeLoginAuth(() => {
					this.$refs.search.open();
				});
			},
			search(e) {
				this.getQueryUserList(e);
			},
			getLocation() {
				var that = this;
				uni.getLocation({
				   type: 'wgs84',
				   success(res) {
						console.log(res, '地理位置')
						that.latitude = res.latitude
						that.longitude = res.longitude
						uni.setStorageSync('latitude', res.latitude)
						uni.setStorageSync('longitude', res.longitude)
					},
				   fail: (info) => {
						console.log('错误1'+info)
				   }
				});
			},
			dingyue() {
				var _this = this;
				_this.$u.get('/system/user/getTmplId',{
					appId : _this.website.appId
				}).then(res => {
					_this.subscrip(res.tmplIds);
				});
			},
			jubao(userId) {
				this.judgeLoginAuth((e) => {
					this.sheetList = [];
					var jubao = {
						text: '举报',
						tag: 'jubao',
						subText: '广告拉人、扰乱平台秩序等',
					};
					
					jubao.userId = userId;
					this.sheetList.push(jubao);
					
					var pass = {
						text: '通过',
						tag: 'pass',
						subText: '资料完善、优先推荐',
					};
					
					var black = {
						text: '拉黑',
						tag: 'black',
						subText: '封号',
					};
					if(e.user.isManager == '1'){
						black.userId = userId;
						this.sheetList.push(black);
						
						pass.userId = userId;
						this.sheetList.push(pass);
					}
					this.sheetShow = true;
				});
			},
			clickSheet(index) {
				var sheet = this.sheetList[index];
				if('jubao' == sheet.tag){
					this.jubaoUser(sheet.userId);
				}else if('pass' == sheet.tag){
					this.passUser(sheet.userId);
				}else if('black' == sheet.tag){
					this.addBlackUser(sheet.userId);
				}
			},
			jubaoUser(userId) {
				this.$u.post('/system/user/addUserBlack',{
					userId: userId,
				}).then(res => {
					this.$u.toast('举报成功');
				});
			},
			passUser(userId) {
				this.$u.post('/system/user/addUserPass',{
					userId: userId,
				}).then(res => {
					this.$u.toast('通过成功');
				});
			},
			addBlackUser(userId) {
				this.$u.post('/system/user/addUserBlackUser',{
					userId: userId,
				}).then(res => {
					this.$u.toast('拉黑成功');
				});
			},
			subscrip(tmplIds) {
				var _this = this;
				var tmplId = tmplIds[0];
				wx.getSetting({
				  withSubscriptions: true,
				  success(res) {
					console.log(res)
					if (res.subscriptionsSetting && res.subscriptionsSetting.mainSwitch) {
					  if (res.subscriptionsSetting.itemSettings && res.subscriptionsSetting.itemSettings[tmplId]) {
						let item = res.subscriptionsSetting.itemSettings[tmplId]
						if (item == "reject") {
						  uni.showModal({
						  	title: '温馨提示',
						  	content: '请打开通知管理里面的消息提醒',
						  	showCancel: false,
						  	success: function(res) {
						  		uni.openSetting({
								  success(res) {
									console.log(res.authSetting)
								  },
								  fail(err) {
									console.error(err);
								  }
								});
						  	}
						  });
						} else if (item == "accept") {
						  uni.requestSubscribeMessage({
						  	//数组，最多放三个订阅模板的ID
						  	tmplIds: tmplIds,
						  	success: function(res) {
						  		var code = res[tmplIds[0]];
						  		if('reject' == code){
						  			_this.$u.toast('请点击允许订阅消息');
						  		}else{
									var time = new Date().getTime();
									uni.setStorageSync("time", time/1000/60);
									
									var token = uni.getStorageSync("token");
									if(token){
										_this.$u.get('/system/user/getMyTip').then(res => {
											
										});
									}
									
									return;
						  		}
						  	},
						  	fail: function(res) {
						  		console.log(res)
						  	},
						  	complete: (res) => {
						  		
						  	}
						  });
						} else if (item == "ban") {
						  uni.showModal({
						  	title: '温馨提示',
						  	content: '请在设置打开订阅消息开关',
						  	showCancel: false,
						  	success: function(res) {
						  		
						  	}
						  });
						}
					  }else{
						uni.requestSubscribeMessage({
							//数组，最多放三个订阅模板的ID
							tmplIds: tmplIds,
							success: function(res) {
								var code = res[tmplIds[0]];
								if('reject' == code){
									_this.$u.toast('请点击允许订阅消息');
								}else{
									var time = new Date().getTime();
									uni.setStorageSync("time", time/1000/60);
									
									var token = uni.getStorageSync("token");
									if(token){
										_this.$u.get('/system/user/getMyTip').then(res => {
											
										});
									}
									
									return;
								}
							},
							fail: function(res) {
								console.log(res)
							},
							complete: (res) => {
								
							}
						});
					  }
					} else {
					  uni.showModal({
					  	title: '温馨提示',
					  	content: '请在设置打开通知管理开关',
					  	showCancel: false,
					  	success: function(res) {
					  		uni.openSetting({
							  success(res) {
								console.log(res.authSetting)
							  },
							  fail(err) {
								console.error(err);
							  }
							});
					  	}
					  });
					}
				  }
				});
			},
			goTopic() {
				uni.showModal({
				  title: '提示',
				  content: '为了防止未实名微信用户进行交友诈骗，需实名认证成功后，可以马上推荐',
				  success: (res) => {
				    if (res.confirm) {
						this.$store.commit('setPay', true);
				    }
				  }
				});
			},
			openLikePop() {
				this.showLikePop = true;
			},
			closeLikePop() {
				this.showLikePop = false;
				//this.getOneUser();
			},
			goSedMsg() {
				this.$u.route({
					url: 'packgeMine/pages/chat/chat',
					params: {
						roomId: this.roomId,
					}
				});
			},
			ok() {
				uni.setStorageSync("cardNum", 2);
				uni.reLaunch({
				  url: '/pages/index?index=2'
				});
			},
			apply(userId) {
				if(userId == 88){
					uni.showModal({
					    title: "温馨提示",
					    content: "系统正在努力匹配中，请等待10秒操作~",
						showCancel: false,
					    success(res) {
					        if (res.confirm) {
								
					        }
					    }
					});
					return;
				}
				
				this.judgeLoginAuth((rs) => {
					/* if(rs.user.phonenumber == null || rs.user.phonenumber == ''){
						this.$store.commit('setPhone', true);
						return;
					} */
					
					this.$u.post('/wq/card/add',{
						cardUserId: userId,
						cardType: '0',
						flag: false,
					}).then(r => {
						this.$u.post('/wq/friendApply/add',{
							userId: userId,
						}).then(res => {
							this.showAnima = true;
							setTimeout(() => {
								this.showAnima = false;
							}, 1000);
							
							this.getOneUser();
							this.roomId =  res.data.roomId;
							this.showLikePop = true;
							this.mutualInfo = res.data;
						}).catch(err => {
							this.showBtn = true;
						});
					}).catch(err => {
						this.showBtn = true;
					})
					
				});
			},
			addWechat(userId) {
				if(userId == 88){
					uni.showModal({
					    title: "温馨提示",
					    content: "系统正在努力匹配中，请等待10秒操作~",
						showCancel: false,
					    success(res) {
					        if (res.confirm) {
								
					        }
					    }
					});
					return;
				}
				
				this.judgeLoginAuth((rs) => {
					/* if(rs.user.phonenumber == null || rs.user.phonenumber == ''){
						this.$store.commit('setPhone', true);
						return;
					} */
					
					this.judgeVipNum((res) => {
						if(res.wechatNum > 0){
							this.addVipApply(userId);
						}else{
							this.addApply(userId);
						}
					});
				});
			},
			addVipApply(userId) {
				this.$u.post('/wq/card/add',{
					cardUserId: userId,
					cardType: '0',
					flag: false,
				}).then(r => {
					this.$u.post('/wq/friendApply/addVipWechat',{
						userId: userId,
					}).then(res => {
						this.showAnima = true;
						setTimeout(() => {
							this.showAnima = false;
						}, 1000);
						
						this.getOneUser();
						this.$refs.uToast.show({
							title: '剩余'+res.wechatNum+'次',
							type: 'success',
							duration: 1000,
							url: 'packgeMine/pages/chat/chat?roomId='+res.roomId
						});
					}).catch(err => {
						this.showBtn = true;
					});
				}).catch(err => {
					this.showBtn = true;
				})
			},
			addApply(userId) {
				this.$u.post('/wq/card/add',{
					cardUserId: userId,
					cardType: '0',
					flag: false,
				}).then(r => {
					this.$u.post('/wq/friendApply/addWechat',{
						userId: userId,
					}).then(res => {
						this.showAnima = true;
						setTimeout(() => {
							this.showAnima = false;
						}, 1000);
						this.getOneUser();
						this.$u.route({
							url: 'packgeMine/pages/chat/chat',
							params: {
								roomId: res.data.roomId,
							}
						});
					}).catch(err => {
						this.showBtn = true;
					});
				}).catch(err => {
					this.showBtn = true;
				})
				
			},
			getQueryUserList(e) {
				var userId = uni.getStorageSync("userId");
				this.$u.get('/system/user/getListByTopic',{
					pageNum: 1,
					pageSize: 30,
					userId: userId,
					min: e.min,
					max: e.max,
					sex: e.sex,
					lon: uni.getStorageSync("longitude"),
					lat: uni.getStorageSync("latitude"),
					isCity: e.isCity,
				}).then(res => {
					var time = new Date().getTime();
					uni.setStorageSync("TantanTime", time/1000/60/60);
					
					this.dataList = res.rows;
					this.getOneUser();
					this.adFlag = false;
				}).catch(err => {
					this.adFlag = false;
					var time = new Date().getTime();
					uni.setStorageSync("TantanTime", time/1000/60/60);
				});
			},
			getUserList() {
				var userId = uni.getStorageSync("userId");
				this.$u.get('/system/user/getListByTopic',{
					pageNum: 1,
					pageSize: 30,
					userId: userId,
					min: 18,
					max: 35,
				}).then(res => {
					var time = new Date().getTime();
					uni.setStorageSync("TantanTime", time/1000/60/60);
					
					this.dataList = res.rows;
					this.getOneUser();
					this.adFlag = false;
				}).catch(err => {
					this.adFlag = false;
					var time = new Date().getTime();
					uni.setStorageSync("TantanTime", time/1000/60/60);
				});
			},
			getOneUser() {
				if(this.dataList.length > 0){
					this.showArrowDown = true;
					this.isInit = true;
					
					var user = this.dataList[0];
					this.userData.id = user.userId;
					this.userData.imgList = user.albums.split(',');
					this.userData.nickName = user.nickName;
					this.userData.wechatFlag = user.wechatFlag;
					this.userData.distance = user.distance;
					if(user.signName){
						this.userData.loveRequirement = user.signName;
					}else{
						this.userData.loveRequirement = "未填写";
					}
					if(user.hobby){
						this.userData.interest = user.hobby;
					}else{
						this.userData.interest = "未填写";
					}
					if(user.introduce){
						this.userData.aboutMe = user.introduce;
					}else{
						this.userData.aboutMe = "未填写";
					}
					this.userData.age = user.age;
					this.userData.city = user.city;
					if(user.sex == '0'){
						this.userData.gender = 'MAN';
					}else {
						this.userData.gender = 'FEMALE';
					}
					this.dataList.splice(0, 1);
					
					this.showBtn = true;
				}else{
					this.showArrowDown = false;
					this.isInit = false;
				}
			},
			logion2(id, type, url) {
				if(id == 88){
					uni.showModal({
					    title: "温馨提示",
					    content: "系统正在努力匹配中，请等待10秒操作~",
						showCancel: false,
					    success(res) {
					        if (res.confirm) {
								
					        }
					    }
					});
					return;
				}
				
				this.animUrl = url;
				this.judgeLoginAuth(()=>{
					// 滑动到顶部
					if (!this.showBtn) {
						console.log('防止连续点击');
						return;
					}
					this.scrollTop = this.oldScrollTop;
					this.$nextTick(()=>{
						this.scrollTop = 0;
					})
					this.userIsLike2(id, type);
				});
			},
			//type 喜欢 true 还是 取消 false
			userIsLike2(userId, type) {
				console.log("开始匹配：" + userId)
				this.showBtn = false;
				
				this.addCard2(userId, type);
			},
			addCard2(userId,type) {
				var cardType = "1";
				if(type){
					cardType = "0";
				}
				this.apply(userId);
			},
			logion3(id, type, url) {
				if(id == 88){
					uni.showModal({
					    title: "温馨提示",
					    content: "系统正在努力匹配中，请等待10秒操作~",
						showCancel: false,
					    success(res) {
					        if (res.confirm) {
								
					        }
					    }
					});
					return;
				}
				
				this.animUrl = url;
				this.judgeLoginAuth(()=>{
					// 滑动到顶部
					if (!this.showBtn) {
						console.log('防止连续点击');
						return;
					}
					this.scrollTop = this.oldScrollTop;
					this.$nextTick(()=>{
						this.scrollTop = 0;
					})
					this.userIsLike3(id, type);
				});
			},
			//type 喜欢 true 还是 取消 false
			userIsLike3(userId, type) {
				console.log("开始匹配：" + userId)
				this.showBtn = false;
				
				this.addCard3(userId, type);
			},
			addCard3(userId,type) {
				var cardType = "1";
				if(type){
					cardType = "0";
				}
				this.addWechat(userId);
			},
			logion(id, type, url) {
				if(id == 88){
					uni.showModal({
					    title: "温馨提示",
					    content: "系统正在努力匹配中，请等待10秒操作~",
						showCancel: false,
					    success(res) {
					        if (res.confirm) {
								
					        }
					    }
					});
					return;
				}
				
				this.animUrl = url;
				this.judgeLoginAuth(()=>{
					// 滑动到顶部
					if (!this.showBtn) {
						console.log('防止连续点击');
						return;
					}
					this.scrollTop = this.oldScrollTop;
					this.$nextTick(()=>{
						this.scrollTop = 0;
					})
					this.userIsLike(id, type);
				});
			},
			//type 喜欢 true 还是 取消 false
			userIsLike(userId, type) {
				console.log("开始匹配：" + userId)
				this.showBtn = false;
				
				this.addCard(userId, type);
			},
			addCard(userId,type) {
				var flag = false;
				var cardType = "1";
				if(type){
					cardType = "0";
					var cardNum = uni.getStorageSync("cardNum");
					if(cardNum){
						if(cardNum > 0){
							flag = true;
						}
					}else{
						flag = true;
					}
				}
				this.$u.post('/wq/card/add',{
					cardUserId: userId,
					scene: uni.getStorageSync("scene"),
					cardType: cardType,
					flag: flag,
				}).then(res => {
					this.showAnima = true;
					setTimeout(() => {
						this.showAnima = false;
					}, 1000);
					
					if(res.data){
						this.getOneUser();
						
						this.roomId =  res.data.roomId;
						this.showLikePop = true;
						this.mutualInfo = res.data;
						
						var cn = uni.getStorageSync("cardNum");
						uni.setStorageSync("cardNum", cn-1);
					}else{
						this.getOneUser();
					} 
				}).catch(err => {
					this.showBtn = true;
				})
			},
			submitBtn() {
				var that = this;
				uni.showModal({
				    title: "温馨提示",
				    content: "系统正在努力匹配中，请等待10秒操作~",
					showCancel: false,
				    success(res) {
				        if (res.confirm) {
							that.judgeLoginAuth(() => {
								that.getUserList();
							}); 
				        }
				    }
				});
				/* if(this.adFlag){
					var that = this;
					uni.showModal({
					    title: "温馨提示",
					    content: "系统正在努力匹配中，请等待10秒操作~",
						showCancel: false,
					    success(res) {
					        if (res.confirm) {
								that.judgeLoginAuth(() => {
									that.getUserList();
								}); 
					        }
					    }
					});
					return;
				}
				this.$u.get('/system/config/getAdValue',{
					appId: this.website.appId
				}).then(res => {
					this.openImg(res.adId);
				}); */
			},
			openImg(adId) {
				var _this = this;
				uni.showModal({
				  title: '提示',
				  content: '看一次广告可以立即推荐',
				  showCancel: false,
				  success: (res) => {
				    if (res.confirm) {
						//加载激励广告
						_this.$utils.videoAdInit(adId);
						// 在适合的场景显示插屏广告
						_this.$utils.videoAdShow()
						.then((res) => {
						  if (res) {
							_this.adFlag = true;
							uni.setStorageSync("cardNum", 2);
						  } else {
							console.log('广告提前退出')
						  }
						})
						.catch((err) => {
							_this.adFlag = true;
							console.log('广告加载失败')
						});  
				    }
				  }
				});
			},
			onscroll(e) { 
				this.oldScrollTop = e.detail.scrollTop;
			},
		},
		confirma() {
			this.isConfirm = false;
		}
	};
</script>

<style lang="scss" scoped>
	.tui-header-icon {
		width: 100%;
		position: fixed;
		top: 0;
		padding: 0 30rpx;
		display: flex;
		align-items: center;
		height: 32px;
		transform: translateZ(0);
		z-index: 99999;
		box-sizing: border-box;
		color: #fff;
		
		.text {
			margin-left: 5px;
		}
	}
	
	.jubao-btn {
		position: absolute;
		right: 15px;
		color: red;
		width: 80rpx;
		height: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.popUpShow {
		overflow: hidden;
		height: 100vh;
	}

	.tuijian_over {
		padding: 30rpx;
		overflow: hidden;
		height: 100vh;
		box-sizing: border-box;
		display: flex;
		align-items: center;

		.imgbg {
			position: relative;
			width: 690rpx;
			height: 957rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			image {
				position: absolute;
				top: 0;
				left: 0;
				width: 690rpx;
				height: 957rpx;
			}

			.over-content {
				position: relative;
				z-index: 1;
				text-align: center;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				.isover {
					color: #333333;
					font-size: 32rpx;
					font-weight: 800;
				}

				.overtime {
					margin-top: 50rpx;
					color: #333333;
					font-size: 48rpx;
					font-weight: 800;
				}

				.nxet-tuijian {
					margin-top: 70rpx;
					width: 372rpx;
					height: 84rpx;
					line-height: 84rpx;
					background: linear-gradient(to right, #c2d2f9, #c5c2f3);
					border-radius: 84rpx;
					color: #415c9e;
					font-size: 28rpx;
					font-weight: 400;
					animation: btnScaleAni 3.5s infinite;
				}
			}
		}
	}

	.mutual_like {
		position: relative;
		width: 582rpx;
		height: 831rpx;
		box-sizing: border-box;

		.likepopbg {
			position: absolute;
			top: 0;
			left: 0;
			width: 582rpx;
			height: 831rpx;
			box-sizing: border-box;
		}

		.trbg {
			box-sizing: border-box;
			position: absolute;
			top: 44rpx;
			right: 13rpx;
			width: 168rpx;
			height: 110rpx;
		}

		.like-pop-content {
			box-sizing: border-box;
			position: absolute;
			top: 0;
			left: 0;
			width: 582rpx;
			height: 831rpx;
			padding: 64rpx 54rpx;
			text-align: center;

			.title {
				box-sizing: border-box;
				text-align: center;
				font-size: 40rpx;
				font-weight: bold;
			}

			.toname {
				padding-top: 18rpx;
				color: #4a4a4a;
				font-size: 28rpx;
				text-align: center;

				.toname_to {
					color: #9fb5eb;
				}
			}

			.avatar_anmi {
				padding-top: 45rpx;
				display: flex;
				height: 124rpx;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				position: relative;

				.avatar {
					width: 124rpx;
					height: 124rpx;
					border-radius: 50%;
					overflow: hidden;
					transition: all 0.3s;

					image {
						width: 100%;
						height: 100%;
					}

					&.avat_left_anmi {
						position: relative;
						left: 0;
						width: 124rpx;
						height: 124rpx;
						animation: leftMove 1s;
					}

					&.avat_right_anmi {
						position: relative;
						right: 0;
						width: 124rpx;
						height: 124rpx;
						animation: rightMove 1s;
					}
				}

				.liketo-icon {
					width: 55rpx;
					height: 41rpx;
				}
			}

			.pt52 {
				padding-top: 52rpx;
				font-size: 28rpx;
				color: #4a4a4a;
			}

			.like-pop-btn {
				width: 474rpx;
				height: 84rpx;
				line-height: 84rpx;
				text-align: center;
				font-size: 28rpx;
				border-radius: 42rpx;

				&.qdzh {
					width: 100%;
					margin-top: 62rpx;
					background: linear-gradient(to right, #c2d2f9, #c5c2f3);
					color: #415c9e;
				}

				&.shzl {
					line-height: 80rpx;
					width: 100%;
					box-sizing: border-box;
					margin-top: 28rpx;
					border: 2px solid #9fb5eb;
					color: #9fb5eb;
				}
			}
		}
	}

	@keyframes leftMove {
		0% {
			left: -130rpx;
		}

		100% {
			left: 0;
		}
	}

	@keyframes rightMove {
		0% {
			right: -130rpx;
		}

		100% {
			right: 0;
		}
	}

	.unfold {
		width: 39rpx;
		height: 40rpx;
		margin: 30rpx auto;
	}

	.animate-middel-top {
		position: fixed;
		top: 50%;
		left: 50%;
		z-index: 111;
		width: 0;
		height: 0;
		// transition: all 0.5s linear;
		transform: translate(-50%, -50%);
		animation: topHide 1s linear;
	}

	@keyframes topHide {
		0% {
			top: 50%;
			width: 0;
			height: 0;
		}

		70% {
			top: 18%;
			width: 100rpx;
			height: 100rpx;
		}

		80% {
			top: 18%;
			width: 100rpx;
			height: 100rpx;
		}

		90% {
			top: 20%;
			width: 80rpx;
			height: 80rpx;
		}

		100% {
			top: 20%;
			wixdth: 0;
			height: 0;
		}
	}

	.footer-fixed {
		position: fixed;
		bottom: calc(var(--window-bottom) + 162rpx);
		left: 116rpx;
		right: 116rpx;
		z-index: 111;
		transition: all 0.3s linear;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		transition: all 1s linear;

		.right {
			width: 104rpx;
			height: 104rpx;
		}
		
		.center {
			background-color: #5b83e8;
			border-radius: 100px;
			padding: 0 15px;
			color: #fff;
			display: flex;
			align-items: center;
			font-size: 32rpx;
			line-height: 104rpx;
			
			.hi {
				margin-left: 10px;
			}
		}
		
		.wx {
			background-color: #19be6b;
		}

		.left {
			width: 108rpx;
			height: 108rpx;
		}
	}

	.fixed_down {
		position: fixed;
		z-index: 12;
		bottom: 30rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 40rpx;
		height: 40rpx;
		transition: all 0.3s linears;
	}

	.fe {
		width: 100%;
		height: 186rpx;
		position: relative;
		display: flex;
		justify-content: center;

		.text {
			height: 40rpx;
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #bbbbbb;
			line-height: 40rpx;
			margin: 0 18rpx;
		}

		.line {
			width: 50rpx;
			height: 2rpx;
			background-color: #bbbbbb;
		}
	}

	.bo {
		.simg {
			width: 32rpx;
			height: 32rpx;
		}

		.name {
			height: 40rpx;
			font-size: 28rpx;
			font-family: PingFang SC-Heavy, PingFang SC;
			font-weight: 800;
			color: #434343;
			line-height: 40rpx;
			margin-left: 16rpx;
		}

		width: 686rpx;
		height: 98rpx;
		margin: 0 auto;
		background: #ffffff;
		margin-top: 32rpx;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.reco_card {
		border-radius: 24rpx;
		background-color: white;
		width: 680rpx;
		height: 98rpx;
		margin: 32rpx auto;
		display: flex;
		align-items: center;
		justify-content: center;

		image {
			width: 32rpx;
			height: 32rpx;
		}

		view {
			margin-left: 16rpx;
			font-size: 28rpx;
			font-weight: bold;
		}
	}

	.Personality_type {
		background-color: white;
		width: 680rpx;
		height: 198rpx;
		margin: 0 auto;
		// margin-top: 32rpx;
		border-radius: 24rpx 24rpx 0 0;

		.content {
			margin-left: 40rpx;
			padding-top: 32rpx;
			display: flex;
			flex-direction: column;

			.have_image {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				font-weight: bold;

				image {
					width: 28rpx;
					height: 28rpx;
				}

				.title {
					padding-left: 12rpx;
				}
			}
		}

		.center {
			margin: 0 auto;
			font-size: 36rpx;
			font-weight: bold;
			margin-top: 20rpx;
		}
	}

	.Personality_content {
		border-radius: 0 0 24rpx 24rpx;

		.item {
			display: flex;
			align-items: center;
			padding-top: 48rpx;
			margin-left: 36rpx;

			.head_text {
				width: 130rpx;
				white-space: nowrap;
			}

			.center {
				background-color: #f5f5f5;
				width: 296rpx;
				border-radius: 16rpx;
				height: 24rpx;
				position: relative;
				margin: 0 26rpx;

				.inner1,
				.inner2,
				.inner3,
				.inner4 {
					border-radius: 16rpx;
					height: 24rpx;
					width: 186rpx;
					position: absolute;

					background-color: #ff91c5;
				}
			}

			.tail_text {
				// width: 130rpx;
			}
		}

		height: 378rpx;

		width: 680rpx;
		background-color: white;
		margin: 0 auto;
	}

	.bottom {
		background-color: #fff;
		position: relative;
		width: 686rpx;
		margin: 0 auto;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		overflow: hidden;
		margin-top: 32rpx;
	}

	.line {
		width: 636rpx;
		margin: 0 auto;
		overflow: hidden;
		display: flex;
		flex-direction: row;
		align-items: center;

		.sm-line {
			width: 50rpx;
			margin: 0 10rpx;
			height: 1rpx;
			background-color: #c8d3e2;
		}
	}

	.circles {
		background: #f5f6fa;
		width: 44rpx;
		height: 44rpx;
		border-radius: 50%;
		position: absolute;
		right: -22rpx;
		top: 174rpx;
	}

	.circle {
		background: #f5f6fa;
		width: 44rpx;
		height: 44rpx;
		border-radius: 50%;
		position: absolute;
		left: -22rpx;
		top: 174rpx;
	}

	page {
		width: 100%;
		height: 100vh;
	}

	.card {
		background-color: white;
		width: 680rpx;
		height: 250rpx;
		margin: 0 auto;
		margin-top: 32rpx;
		border-radius: 24rpx;

		.content {
			margin-left: 40rpx;
			padding-top: 32rpx;
			display: flex;
			flex-direction: column;

			.have_image {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				font-weight: bold;

				image {
					width: 28rpx;
					height: 28rpx;
				}

				.title {
					padding-left: 12rpx;
				}
			}

			.one {
				font-size: 28rpx;
				margin-top: 26rpx;
			}
		}
	}

	.box {
		.swiper {
			position: relative;

			.hint {
				position: absolute;
				top: 46rpx;
				right: 34rpx;
				width: 202rpx;
				height: 62rpx;
				background: rgba(255, 255, 255, 0.2);
				border-radius: 34rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 24rpx;
					height: 28rpx;
				}

				.t {
					font-size: 28rpx;
					font-weight: 400;
					color: #333333;
					margin-left: 14rpx;
				}
			}
		}

		.lable {
			display: flex;
			align-items: center;

			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #434343;
			margin-left: 50rpx;
			margin-top: 48rpx;

			.lable-div {
				height: 54rpx;
				background: #e5f4ff;
				border-radius: 28rpx;
				line-height: 54rpx;
				padding: 0 38rpx;
			}
		}

		.line {
			width: 636rpx;
			// height: 2rpx;
			// background-color: #c8d3e2;
			// border-bottom: 2rpx dashed #c8d3e2;
			margin: 0 auto;
			margin-top: 44rpx;
		}

		.circles {
			background: #f5f6fa;
			width: 44rpx;
			height: 44rpx;
			border-radius: 50%;
			position: absolute;
			right: -22rpx;
			top: 1002rpx;
		}

		.circle {
			background: #f5f6fa;
			width: 44rpx;
			height: 44rpx;
			border-radius: 50%;
			position: absolute;
			left: -22rpx;
			top: 1002rpx;
		}

		width: 686rpx;
		margin: 0 auto;
		border-radius: 42rpx 42rpx 24rpx 24rpx;
		overflow: hidden;
		z-index: 10;
		position: relative;
		background: #fff;

		.ling {
			height: 42rpx;
			display: flex;
			align-items: center;
			margin-left: 58rpx;
			margin-top: 24rpx;

			.img {
				height: 42rpx;
				width: 42rpx;
				margin-right: 8rpx;
			}

			.text {
				height: 34rpx;
				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 34rpx;
			}
		}

		.box-bq {
			height: 40rpx;
			font-size: 28rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #333333;
			margin-left: 58rpx;
			margin-top: 24rpx;
			line-height: 40rpx;
			display: flex;
			align-items: center;

			.xian {
				width: 2rpx;
				height: 20rpx;
				background: #e0e2e8;
				margin: 0 32rpx;
			}
		}

		.box-name {
			.simg {
				width: 48rpx;
				height: 48rpx;
				margin-left: 20rpx;
			}

			height: 56rpx;
			font-size: 40rpx;
			font-family: PingFang SC-Heavy,
			PingFang SC;
			font-weight: 800;
			color: #4a4a4a;
			line-height: 56rpx;
			margin-left: 58rpx;
			margin-top: 24rpx;
			display: flex;
			align-items: center;

			image {
				width: 48rpx;
				height: 48rpx;
				margin-left: 20rpx;
				margin-top: 5rpx;
			}
		}

		.box-jj {
			.box-jj-ta {
				width: 618rpx;
				height: 58rpx;
				background: #f5f6fa;
				border-radius: 30rpx 30rpx 30rpx 30rpx;
				margin: 0 auto;
				margin-top: 32rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.text2 {
					height: 34rpx;
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 34rpx;
					margin-right: 28rpx;
				}

				.box-jj-ta-left {
					display: flex;
					align-items: center;

					.xian {
						width: 2rpx;
						height: 20rpx;
						background: #e0e2e8;
						margin: 0 18rpx;
					}

					.te {
						height: 34rpx;
						font-size: 24rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
						line-height: 34rpx;
					}

					.img {
						width: 24rpx;
						height: 24rpx;
						margin: 0 18rpx 0 26rpx;
					}
				}
			}

			width: 100%;
			height: auto;
			background-color: #fff;
			position: relative;
		}
	}

	.u-nav-slot {
		display: flex;
		align-items: center;

		.text {
			height: 44rpx;
			font-size: 32rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #000000;
			margin-left: 14rpx;
			line-height: 44rpx;
		}

		.img {
			width: 22rpx;
			height: 28rpx;
			margin-left: 32rpx;
		}
	}

	.pageanima {
		position: relative;
	}

	.pagePop {
		animation-name: pagePop; // 动画名称
		animation-timing-function: linear; // 动画执行方式，linear：匀速；ease：先慢再快后慢；ease-in：由慢速开始；ease-out：由慢速结束；ease-in-out：由慢速开始和结束；
		// animation-delay: 1s; // 动画延迟时间
		animation-duration: 0.5s; // 动画完成时间
	}

	@keyframes pagePop {
		0% {
			top: 100rpx;
			opacity: 0.5;
		}

		100% {
			top: 0;
			opacity: 1;
		}
	}

	.bgc-imga {
		position: absolute;
		top: -100rpx;
		left: 0rpx;
		width: 100%;
		pointer-events: none;
		height: 100%;
	}

	page {
		width: 100%;
		height: 100%;
	}

	.popup-container {
		height: 562rpx;
		width: 500rpx;
		overflow: hidden;
		position: relative;

		.pop-bgc {
			position: absolute;
			top: 0;
			pointer-events: none;
			left: 0;
			height: 100%;
			width: 100%;
		}

		.moon-bg {
			position: absolute;
			top: 50rpx;
			pointer-events: none;
			right: 6rpx;
			width: 220rpx;
			height: 152rpx;
		}

		.container {
			position: absolute;
			top: 0;
			left: 0;
			height: 100%;
			width: 100%;

			.container-c {
				width: 392rpx;
				margin: auto;
				margin-top: 66rpx;
			}

			.pop-title {
				color: #4a4a4a;
				font-weight: 800;
				font-size: 40rpx;
			}

			.tips-content {
				width: 448rpx;
				margin: auto;
				text-align: left;
				margin-top: 20rpx;
				line-height: 56rpx;
				font-size: 28rpx;

				.agreement-btn {
					display: inline-block;
					color: #5b83e8;
					text-decoration: underline;
				}
			}

			.btn-c {
				display: flex;
				margin: auto;
				margin-top: 108rpx;
				justify-content: space-between;
				flex-wrap: wrap;
				width: 100%;
			}

			.pop-btn {
				width: 100%;
				height: 84rpx;
				border-radius: 38rpx;
				text-align: center;
				line-height: 84rpx;
				border: 2rpx solid #9fb5eb;
				color: #9fb5eb;
				margin-top: 28rpx;

				&.to-login {
					margin-top: 0;
					display: flex;
					justify-content: center;
					align-items: center;
					border: none;
					color: #415c9e;

					background: linear-gradient(86deg, #c2d2f9 0%, #c5c2f3 100%);

					.sercet-btn {
						vertical-align: middle;
						width: 78rpx;
						height: 40rpx;
						background: #b6b7f8;
						border-radius: 22rpx;
						font-size: 24rpx;
						transform: scale(0.81);
						transform-origin: center;
						color: #fff;
						line-height: 40rpx;
					}
				}
			}
		}
	}
	
	@keyframes btnScaleAni {
	  0%{ transform: scale(.85); opacity: .6; }
	  50%{ transform: scale(1); opacity: 1; }
	  100%{ transform: scale(.85); opacity: .6; }
	}
</style>